<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.div1 {
	border: 5px dashed blue;
	width: 300px;
	height: 300px;
	border-radius: 50%;
	margin: 200px auto;
	background-color: skyblue;
}

.div2 {
	border: 5px solid blue;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: blue;
	margin: 140px auto;
}

.div3 {
	width: 2px;
	height: 140px;
	background-color: red;
	animation: fen 3600s infinite linear;
	margin-left: 150px;
	margin-top: -150px;
	transform-origin: 50% 0;
}

.div4 {
	width: 2px;
	height: 100px;
	background-color: violet;
	animation: miao 60s infinite linear;
	margin-left: 150px;
	margin-top: -140px;
	transform-origin: 50% 0;
}

.div5 {
	width: 2px;
	height: 80px;
	background-color: yellow;
	animation: shi 43200s infinite linear;
	margin-left: 150px;
	margin-top: -100px;
	transform-origin: 50% 0;
}
input{position: absolute;}
.a{margin-top:-370px;
margin-left:600px;
}
.b{margin-top:-520px;

margin-left:748px;
}
.c{
margin-top:-365px;
margin-left:900px;

}
.d{margin-top:-213px;
margin-left:748px;
}
@keyframes shi {
	from {transform: rotate(0);
}

to {
	transform: rotate(360deg);
}

}
@keyframes fen {
	from {transform: rotate(0);
}

to {
	transform: rotate(360deg);
}

}
@keyframes miao {
	from {transform: rotate(0);
}

to {
	transform: rotate(360deg);
}

}
</style>
</head>
<body>
	<div class="div1">
		<div class="div2"></div>
		<div class="div3"></div>
		<div class="div4"></div>
		<div class="div5"></div>
	</div>
<input class="a" type="submit" value="9"> <input class="b"
			type="submit" value="12"> <input class="c" type="submit"
			value="3"> <input class="d" type="submit" value="6">
</body>
</html>